<script lang="ts" setup>
import {ref} from "vue"
import {FileToBase64} from "../utils"
import JsImages from "./js-images.vue"
import {getUserInfo, postUserInfo} from "../serve.ts"
import {ElMessage} from "element-plus"

const
    loading = ref(true),
    fromData: any = ref({}),
    inLoad = ref(false)
;

function get() {
  getUserInfo().then((r: any) => {
    loading.value = false
    fromData.value = r
    // console.table(r)
    inLoad.value = true
  })
}

get()

function loadFile(e: any) {
  loading.value = true
  FileToBase64(e).then((r: any) => {
    fromData.value.avatar = r
    loading.value = false
  })
}

function deleteChange() {
  fromData.value.avatar = ''
}

function change() {
  // if (!fromData.value['avatar']){
  //   // console.log(8888)
  //   fromData.value['avatar'] = ''
  // }
  postUserInfo({...fromData.value}).then(() => {
    ElMessage({type: 'success', message: '更新成功！', duration: 1500})
  })
}
</script>

<template>
  <el-scrollbar>
    <el-card v-loading="loading" box element-loading-text="加载中...">
      <template #header>个人中心</template>
      <el-form ref="froms" el-From>
        <el-form-item label="头像：" prop="avatar">
          <jsImages v-if="inLoad" :picUrl="fromData.avatar" @myPicFile="loadFile"
                    @delete-change="deleteChange"/>
        </el-form-item>
        <el-form-item label="ID：" prop="id">
          {{ fromData['uid'] }}
        </el-form-item>
        <el-form-item label="昵称：" prop="nickname">
          <el-input v-model="fromData['nickname']" placeholder="请输入您的昵称" style="width: 200px;" type="text"/>
        </el-form-item>
        <el-form-item label="账号：" prop="userName">
          {{ fromData['username'] }}
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="fromData['password']" placeholder="请输入您的密码" show-password style="width: 200px;"
                    type="password"/>
        </el-form-item>
        <el-form-item label="邮箱：" prop="mail">
          <el-input v-model="fromData['mail']" placeholder="请输入您的邮箱号" style="width: 200px;"/>
        </el-form-item>
        <el-form-item>
          <el-button round style="width: 70%;margin: auto" type="success" @click="change">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="width: 100%;height: 100px"/>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[box] {
  width: 40%;
  margin: 30px auto auto;

  [el-From] {
    margin: auto;

    [uppw] {
      font-size: 12px;
      float: right;
      cursor: pointer;

      &:hover {
        color: #FA9BB6;
      }
    }
  }
}
</style>